<template>
  <!-- 实时疫情模块 -->
  <div class="realTime">
    <!-- 全国疫情趋势图模块 -->
    <div id="real_container" style="height: 50vh"></div>
    <div class="currentTime">截止时间:{{ new Date() | fmtDate }}</div>
    <!-- 地方疫情趋势模块 -->
    <div id="city_container" style="height: 50vh"></div>
    <div class="currentTime">截止时间:{{ new Date() | fmtDate }}</div>
    <!-- 地区新增模块 -->
    <div class="added_today">
      <!--地区各个城市新增统计柱状图-->
      <div id="columnar_container" style="height: 50vh"></div>
      <!-- 地区新增比例图 -->
      <div id="cakeShape_container" style="height: 50vh"></div>
    </div>
    <div class="currentTime">截止时间:{{ new Date() | fmtDate }}</div>
  </div>
</template>
  
  <script>
export default {

  mounted() {
    this.loadReal();
    this.loadcakeShape();
    this.loadcolumnar();
    this.loadCity();
  },

  methods: {

    //地方疫情趋势图部分
    loadCity() {
      Highcharts.chart("city_container", {
        chart: {
          type: "line",
        },
        title: {
          text: "湖南地区疫情新增趋势图",
        },
        subtitle: {
          text: '数据来源: <a href="">' + "国家卫健委</a>",
        },
        xAxis: {
          type: "datetime",
          allowDecimals: false,
        },
        yAxis: {
          title: {
            text: "数量/人",
          },
          labels: {
            formatter: function () {
              return this.value / 1000 + "k";
            },
          },
        },
        tooltip: {
          pointFormat: "{series.name} <b>{point.y:,.0f}</b>人",
        },
        plotOptions: {
          series: {
            pointStart: Date.UTC(2022, 10, 1),
            pointInterval: 24 * 3600 * 1000, // one day
          },
          area: {
            fillOpacity: 0.3, // 指定所有面积图的透明度

            // 数据点配置
            marker: {
              // 默认null, 是否显示数据点标记
              enabled: false,
              // 默认圆点, 一般取默认值
              // 默认圆点, 一般取默认值
              symbol: "circle",
              radius: 2,
              states: {
                hover: {
                  // 鼠标经过数据点样式配置
                  enabled: true,
                },
              },
            },
          },
        },
        series: [
          {
            name: "新增确诊；",
            data: [
              532, 538, 48, 558, 560, 578, 579, 580, 588, 601, 601, 603, 604,
              611, 655, 157, 187, 168, 169, 175, 706, 711, 735, 741, 741, 750,
              756, 188, 189, 170, 180, 181, 132, 533, 534, 750, 860, 187, 195,
              196, 110, 123, 195, 197, 685, 690, 121, 220, 204, 207, 200, 203,
              280, 208, 284, 87, 90, 295, 296, 215, 210, 256, 223, 235, 238,
              247, 550,
            ],
          },

          {
            name: "死亡；",
            data: [
              0, 1, 2, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0,
              0, 0, 0, 0, 0, 2, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
              0, 0, 0, 0, 0, 0, 0, 1, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
              0,
            ],
          },
          {
            name: "治愈；",
            color: "green",
            // fillColor: {
            //   // 设置渐变的填充颜色
            //   linearGradient: {
            //     x1: 0,
            //     y1: 0,
            //     x2: 0,
            //     y2: 1,
            //   },
            //   stops: [
            //     [0, Highcharts.getOptions().colors[5]],
            //     [
            //       1,
            //       Highcharts.Color(Highcharts.getOptions().colors[6])
            //         .setOpacity(0)
            //         .get("rgba"),
            //     ],
            //   ],
            // },
            data: [
              208, 252, 258, 248, 258, 250, 258, 259, 250, 258, 261, 201, 203,
              264, 211, 255, 267, 287, 268, 269, 205, 276, 271, 235, 271, 241,
              250, 276, 278, 289, 290, 220, 231, 282, 233, 284, 250, 280, 287,
              295, 296, 210, 223, 265, 297, 285, 290, 321, 300, 334, 367, 370,
              373, 380, 308, 384, 387, 300, 305, 306, 305, 350, 356, 330, 375,
              338, 341,
            ],
          },
        ],
      });
    },
//全国疫情趋势图部分
    loadReal() {
      Highcharts.chart("real_container", {
        chart: {
          type: "area",
        },
        title: {
          text: "全国疫情新增趋势图",
        },
        subtitle: {
          text: '数据来源: <a href="">' + "国家卫健委</a>",
        },
        xAxis: {
          type: "datetime",
          allowDecimals: false,
          // labels: {
          //   formatter: function () {
          //     return this.value; // clean, unformatted number for year
          //   },
          // },
        },
        yAxis: {
          title: {
            text: "数量/人",
          },
          labels: {
            formatter: function () {
              return this.value / 1000 + "k";
            },
          },
        },
        tooltip: {
          pointFormat: "{series.name} <b>{point.y:,.0f}</b>人",
        },
        plotOptions: {
          series: {
            pointStart: Date.UTC(2022, 10, 1),
            pointInterval: 24 * 3600 * 1000, // one day
          },
          area: {
            fillOpacity: 0.3, // 指定所有面积图的透明度

            // 数据点配置
            marker: {
              // 默认null, 是否显示数据点标记
              enabled: false,
              // 默认圆点, 一般取默认值
              // 默认圆点, 一般取默认值
              symbol: "circle",
              radius: 2,
              states: {
                hover: {
                  // 鼠标经过数据点样式配置
                  enabled: true,
                },
              },
            },
          },
        },
        series: [
          {
            name: "新增确诊：",
            data: [
              1532, 1538, 1548, 1558, 1560, 1578, 1579, 1580, 1588, 1601, 1601,
              1603, 1604, 1611, 1655, 1657, 1687, 1688, 1699, 1705, 1706, 1711,
              1735, 1741, 1741, 1750, 1756, 1788, 1789, 1790, 1820, 1831, 1832,
              1833, 1834, 1850, 1860, 1887, 1895, 1896, 1910, 1923, 1965, 1987,
              1985, 1990, 2021, 2020, 2034, 2067, 2070, 2073, 2080, 2088, 2084,
              2087, 2090, 2095, 2096, 2105, 2150, 2156, 2230, 2375, 2398, 2447,
              2550,
            ],
          },
          {
            name: "治愈：",
            color: "green",
            fillColor: {
              // 设置渐变的填充颜色
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1,
              },
              stops: [
                [0, Highcharts.getOptions().colors[5]],
                [
                  1,
                  Highcharts.Color(Highcharts.getOptions().colors[6])
                    .setOpacity(0)
                    .get("rgba"),
                ],
              ],
            },
            data: [
              2508, 2532, 2538, 2548, 2558, 2560, 2578, 2579, 2580, 2588, 2601,
              2601, 2603, 2604, 2611, 2655, 2657, 2687, 2688, 2699, 2705, 2706,
              2711, 2735, 2741, 2741, 2750, 2756, 2788, 2789, 2790, 2820, 2831,
              2832, 2833, 2834, 2850, 2860, 2887, 2895, 2896, 2910, 2923, 2965,
              2987, 2985, 2990, 3021, 3020, 3034, 3067, 3070, 3073, 3080, 3088,
              3084, 3087, 3090, 3095, 3096, 3105, 3150, 3156, 3230, 3375, 3398,
              3421,
            ],
          },
        ],
      });
    },
    //地区疫情新增部分
    loadcolumnar() {
      Highcharts.chart("columnar_container", {
        chart: {
          type: "column",
        },
        title: {
          text: "湖南城市疫情新增",
        },
        subtitle: {
          text: '数据来源: <a href="">' + "湖南卫健委</a>",
        },
        xAxis: {
          categories: [
            "长沙",
            "湘潭",
            "株洲",
            "衡阳",
            "邵阳",
            "岳阳",
            "常德",
            "张家界",
            "郴州",
            "益阳",
            "永州",
            "怀化",
            "娄底",
            "湘西",
          ],
        },
        yAxis: {
          title: {
            text: "数量/人",
          },
        },
        credits: {
          enabled: true,
        },
        plotOptions: {
          column: {
            pointWidth: 11,                //柱子的大小(会影响到柱子的大小)
            // pointPadding: 0,            //柱子之间的间隔(会影响到柱子的大小)
            // groupPadding: 0,                //每一组柱子之间的间隔(会影响到柱子的大小)
            // borderWidth: 5,               //柱子边框的大小
            minPointLength: 10,
            // 关于柱状图数据标签的详细配置
            dataLabels: {
              enabled: true,
            },
          },
        },
        tooltip: {
          headerFormat: '<span style="font-size: 14px">{point.key}</span><br/>',
          pointFormat:
            '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',
          shared: true,
        },
        series: [
          {
            color: "black",
            name: "死亡数量",
            data: [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "新增确诊",
            data: [5, 13, 10, 15, 17, 18, 25, 27, 19, 15, 12, 10, 6, 3],
          },

          {
            color: "rgba(70, 173, 109, 0.816)",
            name: "无症状感染",
            data: [3, 6, 7, 12, 14, 15, 14, 19, 17, 14, 13, 10, 8, 4],
          },
        ],
      });
    },

    //实时数据部分
    loadReal_TimeData() {
      Highcharts.setOptions({
        global: {
          useUTC: false,
        },
      });
      function activeLastPointToolip(chart) {
        var points = chart.series[0].points;
        chart.tooltip.refresh(points[points.length - 1]);
      }
      var chart = Highcharts.chart("real_TimeData", {
        chart: {
          type: "spline",
          marginRight: 10,
          // 事件
          events: {
            load: function () {
              var series = this.series[0],
                chart = this;
              activeLastPointToolip(chart);
              // 每隔1秒钟，图表更新一次
              setInterval(function () {
                var x = new Date().getTime(), // 当前时间
                  y = 8;
                // y = Math.random() * 5; // 随机值
                series.addPoint([x, y], true, true);
                activeLastPointToolip(chart);
              }, 1000);
            },
          },
        },
        title: {
          text: "湖南疫情实时数据",
        },
        subtitle: {},
        xAxis: {
          type: "datetime",
          tickPixelInterval: 150,
        },
        yAxis: {
          title: {
            text: "新增数量/人",
          },
        },
        tooltip: {
          formatter: function () {
            return (
              "<b>" +
              Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) +
              "</b><br/>" +
              this.series.name +
              Highcharts.numberFormat(this.y, 0)
            );
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: "新增确诊人数",
            data: (function () {
              // 生成随机值
              var data = [],
                time = new Date().getTime(),
                i;
              for (i = -19; i <= 0; i += 1) {
                data.push({
                  x: time + i * 1000,

                  y: Math.random() * 8,
                });
              }
              return data;
            })(),
          },
        ],
      });
    },

    //地区新增比例部分
    loadcakeShape() {
      Highcharts.chart("cakeShape_container", {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0,
          },
        },
        title: {
          text: "湖南新增感染比例",
        },
        subtitle: {
          text:
            '数据来源:<a href="http://www.nhc.gov.cn/ ">' + "湖南卫健委</a>",
        },
        tooltip: {
          headerFormat: "{series.name}<br>",
          pointFormat: "{point.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 35,
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.percentage:.1f} %",
              style: {
                color:
                  (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                  "black",
              },
            },
            states: {
              hover: {
                enabled: false,
              },
            },
            slicedOffset: 20, // 突出间距
            point: {
              // 每个扇区是数据点对象，所以事件应该写在 point 下面
              events: {
                // 鼠标滑过是，突出当前扇区
                mouseOver: function () {
                  this.slice();
                },
                // 鼠标移出时，收回突出显示
                mouseOut: function () {
                  this.slice();
                },
                // 默认是点击突出，这里屏蔽掉
                click: function () {
                  return false;
                },
              },
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "新增比例",
            data: [
              ["新增确诊", 195],
              ["无症状病例", 156],
              ["死亡", 1],
            ],
          },
        ],
      });
    },
  },
};
</script>
  
  <style scoped>
#columnar_container {
  width: 70%;
  float: left;
}
#cakeShape_container {
  width: 30%;
  float: left;
  /* 清除浮动 */
  /* clear: both; */
}
.currentTime {
  color: #999;
  font-size: 20px;
  margin: 5px;
  /* float: right; */
}
</style>
  